<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NWSAPI HTML5 elements selection test</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="../../src/nwsapi.js"></script>
<style type="text/css">
.pass { color: #0c0; }
.fail { color: #c00; }
span { color: #00c; font-family: Courier New; }
</style>
</head>
<body>

<h1>NWSAPI: test class attribute in Quirks Mode</h1>

<p>Using NWSAPI select method looking for "[class~=foobar]" selector</p>

<div id="dom">
	<div id="d1" class="foobar">Lower case classname <span>foobar</span></div>
	<div id="d2" class="fooBar">Mixed case classname <span>fooBar</span></div>
	<div id="d3" class="FOOBAR">Upper case classname <span>FOOBAR</span></div>
</div>

<p>Using querySelectorAll method looking for "[class~=foobar]" selector</p>

<div id="qsa">
	<div id="q1" class="foobar">Lower case classname <span>foobar</span></div>
	<div id="q2" class="fooBar">Mixed case classname <span>fooBar</span></div>
	<div id="q3" class="FOOBAR">Upper case classname <span>FOOBAR</span></div>
</div>

<hr>

<script type="text/javascript">

window.onload = function() {

  function log(msg) {
    document.body.appendChild(document.createElement('div')).innerHTML = msg;
  }

  var i, l, outer, real, temp;

  outer = document.getElementById('dom');
  items = outer.getElementsByTagName('div');
  temp = NW.Dom.select('#dom [class~=foobar]');
  real = Array.prototype.slice.call(outer.getElementsByClassName('foobar'), 0);

  log('--- TESTED USING nwsapi NW.Dom.select("#dom [class~=foobar]") --- ' + temp.length + ' elements found - 3 class names');

  for (i = 0, l = items.length; l > i; ++i) {
    if (real[i] === temp[i]) {
      items[i].className += ' pass';
      items[i].innerHTML += ' - PASSED';
    } else {
      items[i].className += ' fail';
      items[i].innerHTML += ' - FAILED';
    }
  }

  outer = document.getElementById('qsa');
  items = outer.getElementsByTagName('div');
  temp = document.querySelectorAll('#qsa [class~=foobar]');
  real = Array.prototype.slice.call(outer.getElementsByClassName('foobar'), 0);

  log('--- TESTED USING document.querySelectorAll("#qsa [class~=foobar]") --- ' + temp.length + ' elements found - 3 class names');

  for (i = 0, l = items.length; l > i; ++i) {
    if (real[i] === temp[i]) {
      items[i].className += ' pass';
      items[i].innerHTML += ' - PASSED';
    } else {
      items[i].className += ' fail';
      items[i].innerHTML += ' - FAILED';
    }
  }

};

</script>

</body>
</html>
